<template>
  <a-modal
    title="服务提报列表"
    :width="1000"
    :confirm-loading="modalLoading"
    :mask-closable="false"
    v-model="visible"
    @ok="handleOk"
  >
    <div class="checked">
      <div class="let">已选择：</div>
      <div class="rig">
        <template v-if="chckedList.length">
          <a-tag v-for="(item, index) of chckedList" :key="index" color="green" closable @close="close(index)">
            {{ item.service_name }}
          </a-tag>
        </template>
        <p v-else>请选择</p>
      </div>
    </div>

    <a-table
      size="default"
      :columns="columns"
      :data-source="list"
      :row-key="record => record.id"
      :pagination="{
        total: this.total,
        pageSize: this.pageSize,
        showSizeChanger: false,
        onChange: this.tablePageChange
      }"
    >
      <span slot="category_id" slot-scope="text, record">
        {{ record.category_id }}
      </span>

      <span slot="biz_status" slot-scope="text, record">
        <a-tooltip>
          <template slot="title" v-if="text.info && text.info.reject_reason">
            {{ text.info.reject_reason }}
          </template>
          <div class="name">
            <a-badge :color="getStatus(record.biz_status)[1]" :text="getStatus(record.biz_status)[0]" />
          </div>
        </a-tooltip>
      </span>

      <span slot="action" slot-scope="text, record">
        <!-- -->
        <a-button
          :disabled="record.biz_status !== 'PROMOTION'"
          v-show="showBtn(record)"
          type="link"
          size="small"
          @click="handleItem('select', record)"
          >选择</a-button
        >
      </span>
    </a-table>
  </a-modal>
</template>

<script>
import { serviceListQuery } from '@/api/marketing/alipayPromotion'

const columns = [
  {
    title: 'ID',
    dataIndex: 'service_code',
    width: 200
  },
  {
    title: '服务名称',
    dataIndex: 'service_name'
  },
  {
    title: '类型',
    scopedSlots: {
      customRender: 'category_id'
    }
  },
  {
    title: '状态',
    scopedSlots: {
      customRender: 'biz_status'
    }
  },
  {
    title: '操作',
    scopedSlots: {
      customRender: 'action'
    },
    width: 100
  }
]
export default {
  props: {
    key: {
      type: String,
      default: 'service_code'
    },

    id: {
      type: Number,
      default: undefined
    }
  },

  data() {
    return {
      chckedList: [],
      total: 0,
      pageNo: 1,
      pageSize: 10,
      columns,
      list: [],
      modalLoading: false,
      visible: false
    }
  },

  watch: {
    id(e) {
      if (e) {
        this.getList()
      }
    }
  },

  computed: {
    showBtn() {
      return item => {
        let { chckedList, key } = this,
          _item = chckedList.find(el => el[key] === item[key])
        return !_item
      }
    },

    getStatus() {
      return status => {
        let text, color
        switch (status) {
          case 'EDITING':
            text = '编辑中'
            color = 'rgba(0, 0, 0, 0.25)'
            break

          case 'AUDITING':
            text = '审核中'
            color = 'rgba(0, 0, 0, 0.25)'
            break

          case 'PROMOTION':
            text = '可推广'
            color = '#65C817'
            break

          default:
            if (status === 'STOP_PROMOTION') {
              text = '停止推广'
            } else if (status === 'AUDIT_REJECT') {
              text = '审核驳回'
            } else if (status === 'INVALID') {
              text = '失效'
            } else if (status === 'PUNISHED') {
              text = '处罚'
            }
            color = '#FF4D4F'
            break
        }

        return [text, color]
      }
    }
  },

  methods: {
    handleOk() {
      this.$emit('select', this.chckedList)
      this.visible = false
    },

    close(index) {
      this.chckedList.splice(index, 1)
    },

    // 获取数据列表
    async getList(page_num = 1) {
      const hide = this.$message.loading('加载中', 0)
      let { pageSize: page_size, id } = this

      const res = await serviceListQuery({
        id,
        page_size: String(page_size),
        page_num: String(page_num)
      })

      if (!res.code) {
        let { total } = res.data
        this.total = total
        this.list = res.data.records || []
      }
      hide()
    },

    // 分页请求
    tablePageChange(e) {
      this.getList(e)
    },

    // 点击单个
    handleItem(type, item) {
      switch (type) {
        case 'select':
          this.chckedList.push(item)
          break
      }
    }
  }
}
</script>

<style lang="less" scoped>
.checked {
  padding-bottom: 20px;
  display: flex;

  .rig {
    flex: 1;
    overflow: hidden;
  }
}
</style>
